<template>
  <div class="wraper">
    <!-- 头部 -->
    <div class="topSearch">
      <div style="width: 350px">
        <a-input-search
          placeholder="岗位名称/编码"
          style="width: 300px"
          enter-button
        />
        <a-button icon="filter" style="margin-left: 15px" />
      </div>
      <div>
        <a-button type="primary" icon="plus">新增岗位</a-button>
      </div>
    </div>
    <!-- 内容区 -->
    <div style="display: flex">
      <!-- sider区 -->
      <div style="width: 299px; height: 100%; margin-right: 15px">
        <div>
          <span style="border-left: 5px solid #1890ff; padding-left: 10px"
            >岗位类别</span
          >
          <span style="float: right">
            <a-icon type="question-circle" />
            <a-button type="link" style="padding: 0 3px">设置</a-button>
          </span>
        </div>
        <a-divider style="margin: 5px 0" />
      </div>
      <a-divider style="margin: 0 12px 0 0; height: 500px" type="vertical" />
      <!-- table区 -->
      <div style="width: 100%; height: 100%">
        <a-table
          :columns="columns"
          :row-key="(record) => record.login.uuid"
          :customHeaderRow="customHeaderRow"
          :data-source="data"
          :pagination="false"
          :scroll="{ x: 900 }"
          :loading="loading"
          @change="handleTableChange"
        >
          <template slot="name" slot-scope="name">
            {{ name.first }}
          </template>
          <template slot="location" slot-scope="location">{{
            location.street.number
          }}</template>
          <template slot="login" slot-scope="login">{{
            login.username
          }}</template>
          <template slot="dob" slot-scope="dob">{{ dob.date }}</template>
          <template slot="id" slot-scope="id">{{ id.name }}</template>
          <template slot="registered" slot-scope="registered">{{
            registered.date
          }}</template>
          <template slot="nat" slot-scope="nat">{{ nat }}</template>

          <template slot="phone" slot-scope="phone">{{ phone }}</template>

          <template slot="cell" slot-scope="cell">{{ cell }}</template>

          <template slot="operation" slot-scope="text, record">
            <a-button
              style="padding: 0 5px"
              type="link"
              @click="() => onEdit(record)"
            >
              编辑
            </a-button>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios"

const queryData = (params) => {
  return axios.get("https://randomuser.me/api", { params: params })
}
const columns = [
  {
    title: "岗位名称",
    dataIndex: "name",
    key: "name",
    scopedSlots: { customRender: "name" },
    width: 150,
    fixed: 'left'
  },
  {
    title: "在职人数 ",
    dataIndex: "location",
    key: "location",
    scopedSlots: { customRender: "location" },
    width: 100,
  },
  {
    title: "全职人数",
    dataIndex: "gender",
    key: "gender",
    width: 100,
    scopedSlots: { customRender: "gender" },
  },

  {
    title: "人员编制",
    dataIndex: "dob",
    key: "dob",
    width: 100,
    scopedSlots: { customRender: "dob" },
  },
  {
    title: "岗位编码",
    dataIndex: "id",
    key: "id",
    width: 100,
    scopedSlots: { customRender: "id" },
  },
  {
    title: "所属组织 ",
    dataIndex: "registered",
    key: "registered",
    width: 100,
    scopedSlots: { customRender: "registered" },
  },
  {
    title: "岗位类别",
    dataIndex: "nat",
    key: "nat",
    width: 100,
    scopedSlots: { customRender: "nat" },
  },
  {
    title: "职级",
    dataIndex: "phone",
    key: "phone",
    width: 100,
    scopedSlots: { customRender: "phone" },
  },
  {
    title: "职等",
    dataIndex: "cell",
    key: "cell",
    width: 100,
    scopedSlots: { customRender: "cell" },
  },
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" },
    align: 'right',
    fixed: 'right',
    width: 100,
  },
]

export default {
  name: "list1",
  data () {
    return {
      loading: false,
      selectedRowKeys: [],
      data: [],
      pagination: {
        showSizeChanger: true,
        position: "bottom",
      },
      columns,
      arr1: [
        {
          name: 1,
          age: 2,
          list: [{
            sex: 3,
            full: 4
          }]
        },
        {
          name: 1,
          age: 2,
          list: [{
            sex: 3,
            full: 4
          }]
        }
      ]
    }
  },
  computed: {
  },
  mounted () {
    this.fetch()
    let test = []
    this.arr1.forEach(item => {
      let obj = { ...item }
      item.list.forEach(item1 => {
        obj = { ...obj, ...item1 }
      })
      test.push(obj)
    })
  },
  methods: {

    customHeaderRow () {
      return {
        style: { 'font-size': '14px' }
      }
    },
    onEdit (item) {
      console.log(item)
    },
    handleTableChange (pagination, filters, sorter) {
      console.log(pagination)
      const pager = { ...this.pagination }
      pager.current = pagination.current
      this.pagination = pager
      this.fetch({
        results: pagination.pageSize,
        page: pagination.current,
        sortField: sorter.field,
        sortOrder: sorter.order,
        ...filters,
      })
    },
    fetch (params = {}) {
      this.loading = true
      queryData({
        results: 10,
        ...params,
      }).then(({ data }) => {
        const pagination = { ...this.pagination }
        // Read total count from server
        // pagination.total = data.totalCount;
        pagination.total = 200
        this.loading = false
        this.data = data.results
        this.pagination = pagination
      })
    },
  },
};
</script>
<style  lang="less" scoped>
.wraper {
  width: 100%;
  .topSearch {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
  }
}
</style>